<template>
    <div>
        <ul id="topNav">
            <li><a href="">首页</a></li>
            <li><a href="">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <a href="#">课程分类<i class="el-icon-arrow-down el-icon--right"></i></a>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in courseLists" :key="index">{{item.title}}</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
            </a></li>
            <li><a href="">专属课程</a></li>
        </ul>
    </div>
</template>

<script>
    import {getCourseList} from "../../api";

    export default {
        name: "topNavlist",
        data(){
            return {
                courseLists: []
            }
        },
        created() {
            getCourseList().then(res=>{
                this.courseLists = res.rows;
            })
        }
    }
</script>

<style scoped lang="less">
    @hoverColor:#00cf8c;
    ul{
        list-style: none;
    }
    #topNav{
        padding: 0;
        margin-top: 35px;
        margin-left: 40px;
        margin-right: 30px;
        margin-bottom: 0px;
        width: 267px;
        height: 30px;
        li{
            margin-right: 30px;
            float: left;
            a{
                text-decoration: none;
                color: #000000;
            }
        }
    }
    #topNav a:hover{
        color: @hoverColor;
    }
    //课程分类下拉菜单
    .el-dropdown-link {
        width: 80px;
        cursor: pointer;
        color: #000000;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: @hoverColor;
        color: #000000;
    }
    /deep/
    .el-popper{
        top: 100px !important;
    }
</style>